---
layout: landing 
title: Furatto
---

<div class="row">
   <div class="section">
      <h1 class="motto animated fadeInDownBig">Lightweight & friendly front-end framework to get job done.</h1>
      <a href="{{ site.download.dist }}" class="button xlarge radius animated zoomIn" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Download', 'Download V3']);">Download Furatto</a>
      <br />
      <img src="/furatto/assets/img/furatto-window.png" alt="" class="responsive window animated fadeInUp" />
   </div>
   <div class="section skills">
     <h4 class="motto">Skills</h4>
     <h6 class="sub-motto">Built on top of great technology</h6>

     <div class="row">
       <div class="col-3 skill">
          <img src="/furatto/assets/img/sass.png" alt="" class="responsive" />
          <h6>Sass & Compass</h6>
       </div>
       <div class="col-3 skill">
          <img src="/furatto/assets/img/expand.png" alt="" class="responsive" />
          <h6>Extendable</h6>
       </div>
       <div class="col-3 skill">
          <img src="/furatto/assets/img/custom.png" alt="" class="responsive" />
          <h6>Highly Customizable</h6>
       </div>
       <div class="col-3 skill">
          <img src="/furatto/assets/img/grid.png" alt="" class="responsive" />
          <h6>Simple grid</h6>
       </div>
     </div>
   </div>

   <hr class="medium section"/>

   <div class="section">
     <h2 class="mobile-first">A mobile first framework for fast <br /> development.</h2>
   </div>

   <hr class="medium section"/>

   <div class="section examples">
     <h4 class="motto">Examples</h4>
     <h6 class="sub-motto">Here are quick start points for you to kick off your next project.</h6>
     
     <div class="row">
       <div class="col-3">
         <a class="example" href="/furatto/examples/bare_bones/" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Bare bones']);">
           <img src="/furatto/assets/img/example-1.png" alt="" class="responsive" />
           <br />
           <span>Bare bones</span>
       </div>
       <div class="col-3">
         <a class="example" href="/furatto/examples/login/" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Login']);">
           <img src="/furatto/assets/img/example-2.png" alt="" class="responsive" />
           <br />
           <span>Login Form</span>
         </a>
       </div>
       <div class="col-3">
         <a class="example" href="/furatto/examples/gallery/" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Gallery']);">
           <img src="/furatto/assets/img/example-3.png" alt="" class="responsive" />
           <br />
           <span>Gallery</span>
         </a>
       </div>
       <div class="col-3">
         <a class="example" href="/furatto/examples/blog/" target="_blank" onclick="_gaq.push(['_trackEvent', 'Furatto Actions', 'Examples', 'Blog']);">
           <img src="/furatto/assets/img/example-4.png" alt="" class="responsive" />
           <br />
           <span>Blog</span>
         </a>
       </div>
     </div>
   </div>
   <div class="section contribute">
     <h4 class="motto">Contribute</h4>
     <h6 class="sub-motto">We love when developers join the project, check how you can help.</h6>

     <div class="row medium">
       <div class="col-4 contribution">
         <a href="https://github.com/IcaliaLabs/furatto/issues/new" class="button xlarge alpha radius">Open an issue</a>
       </div>
       <div class="col-4 contribution">
         <a href="https://twitter.com/furattoicalia" class="button xlarge alpha radius">Shout a tweet</a>
       </div>
       <div class="col-4 contribution">
         <a href="https://github.com/IcaliaLabs/furatto/issues/new" class="button xlarge alpha radius">Submit theme</a>
       </div>
     </div>
   </div>
</div>
